<template>
  <div class="startRegister">
    <van-steps :active="active">
      <van-step>个人信息</van-step>
      <van-step>地址信息</van-step>
      <van-step>家属信息</van-step>
      <van-step>住院信息</van-step>
    </van-steps>
    <div class="wrap">
      <van-form @submit="onSubmit" ref="formRef">
        <PerSonal v-if="active == 0"></PerSonal>
        <Address v-if="active == 1"></Address>
        <Family v-if="active == 2"></Family>
        <InHospital v-if="active == 3"></InHospital>

        <!-- <component :is="componentName[1]" :formPam="formPam"></component> -->
      </van-form>
    </div>
    <div class="bottom" style="">*婴儿或学龄前儿童选无业人员</div>
    <div style="padding: 32px 15px">
      <van-button
        v-if="active != 3"
        @click="next"
        style="height: 40px"
        color="#40BB90"
        type="primary"
        block
        >下一步</van-button
      >
      <van-button
        v-if="active == 3"
        @click="register"
        style="height: 40px"
        color="#40BB90"
        type="primary"
        block
        >提交登记</van-button
      >
      <p
        v-if="active > 0"
        @click="backtrack"
        style="font-size: 14px; color: #40bb90; text-align: center"
      >
        返回上一步
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import PerSonal from '@/components/PerSonal.vue';
import Address from '@/components/Address.vue';
import Family from '@/components/Family.vue';
import InHospital from '@/components/InHospital.vue';

import { IgetDetailByNoticeSerialNo } from '@/typings/getDetailByNoticeSerialNo';
import { IsaveResidentAdmitNote } from '@/typings/saveResidentAdmitNote';
import { commonTypes } from '@/typings/commonTypes';
import { saveResidentAdmitNote } from '@/services/inHospitalApi';
import { useTo } from '@/utils/useTo';

import { Cell, CellGroup, Dialog, Step, Steps, Form, Field, Toast } from 'vant';
import type { FormInstance } from 'vant';

import { useStore } from 'vuex';
const store = useStore<commonTypes.IState>();
//因为这里用了script的setup方式就用不到 defineComponent 这个定义组件的api了
import {
  useSlots,
  useAttrs,
  defineProps,
  computed,
  onMounted,
  watchEffect,
  ref,
  reactive,
} from 'vue';

// 跳路由用
//import router from '@/router/index';
// 获取路由参数
import { useRoute } from 'vue-router';
const route = useRoute();
// const slots = useSlots();
// const attrs = useAttrs();

//import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
const componentName = ref({
  0: 'PerSonal',
  1: 'Address',
});

//const savePam = ref<IsaveResidentAdmitNote.IRootObject>({} as IsaveResidentAdmitNote.IRootObject);

const active = ref<number>(0);
const formRef = ref<FormInstance>();
const username = ref('');
const formPam = reactive<IgetDetailByNoticeSerialNo.IRootObject>({
  isConfirm: null,
  busObj: null,
});

const next = () => {
  formRef.value?.submit();
};
//返回上一步
const backtrack = () => {
  active.value--;
};
//验证通过
const onSubmit = (values: any) => {
  console.log('submit', values);
  active.value != 3 && active.value++;
};

//提交接口
const saveFn = () => {
  const DocAdmiNote = computed(
    (): IgetDetailByNoticeSerialNo.DocAdmiNote => store.getters.getFormDocAdmiNote,
  ).value;
  const NurseAdmiNote = computed(
    (): IgetDetailByNoticeSerialNo.NurseAdmiNote => store.getters.getFormNurseAdmiNote,
  ).value;
  const PatAdmiNote = computed(
    (): IgetDetailByNoticeSerialNo.PatAdmiNote => store.getters.getFormPatAdmiNote,
  ).value;
  const user = store.state.currentUser;
  let pam: IsaveResidentAdmitNote.IRootObject = {
    userId: route.query.userId ?? null,
    familyId: user.cardList && user.cardList.length ? user.cardList[0].familyId : null,
    familyCardId: user.cardList && user.cardList.length ? user.cardList[0].id : null,
    hospitalId: store.state.hospitalId,
    hospitalUUID: store.state.hospitalUUID,
    data: {
      patientName: DocAdmiNote.patName,
      sex: PatAdmiNote.sex,
      nationality: PatAdmiNote.nationality,
      nation: PatAdmiNote.nation,
      idCardNo: PatAdmiNote.idCardNo, //身份证
      birthday: PatAdmiNote.birthday, //'1984-10-27',
      marriage: PatAdmiNote.marriage,
      profession: PatAdmiNote.profession,
      phoneNo: PatAdmiNote.phoneNo,
      register: PatAdmiNote.register,
      registerProv: PatAdmiNote.registerProv,
      registerCity: PatAdmiNote.registerCity,
      registerCounty: PatAdmiNote.registerCounty,
      registerStreet: PatAdmiNote.registerStreet,
      residence: PatAdmiNote.residence,
      residenceStreet: PatAdmiNote.residenceStreet,
      residencePhone: PatAdmiNote.residencePhone,
      residenceZip: PatAdmiNote.residenceZip,
      birthProv: PatAdmiNote.birthProv,
      birthCity: PatAdmiNote.birthCity,
      birthCounty: PatAdmiNote.birthCounty,
      nativePlace: PatAdmiNote.nativePlace,
      workAddress: PatAdmiNote.workAddress,
      workZipCode: PatAdmiNote.workZipCode,
      contactName: PatAdmiNote.contactName,
      relation: PatAdmiNote.relation,
      contactPhone: PatAdmiNote.contactPhone,
      contactAddress: PatAdmiNote.contactAddress,
      contactAddressProv: PatAdmiNote.contactAddressProv,
      contactAddressCity: PatAdmiNote.contactAddressCity,
      contactAddressCounty: PatAdmiNote.contactAddressCounty,
      contactAddressStreet: PatAdmiNote.contactAddressStreet,
      times: PatAdmiNote.times,
      identity: PatAdmiNote.identity,
      height: PatAdmiNote.height,
      animalHeat: PatAdmiNote.animalHeat,
      weight: PatAdmiNote.weight,
      bloodPressure: PatAdmiNote.bloodPressure,
      pulse: PatAdmiNote.pulse,
      noticeSerialNo: PatAdmiNote.noticeSerialNo,
      patSource: PatAdmiNote.patSource,
    },
  };
  saveResidentAdmitNoteFn(pam);
};

//提交api
const saveResidentAdmitNoteFn = async (pam: IsaveResidentAdmitNote.IRootObject) => {
  const toast = Toast.loading({
    overlay: true,
    duration: 0,
  });
  const [err, res] = await useTo(saveResidentAdmitNote(pam));
  toast.clear();
  if (err) return Toast(err.errorMsg);
  Toast(res.errorMsg);
};

//提交登记
const register = () => {
  next();
  formRef.value?.validate().then(() => {
    saveFn();
  });
};

onMounted(() => {
  //console.log('onMounted:', process.env.NODE_ENV);
});

//watchEffect 会最先执行
watchEffect(() => {
  //console.log('watchEffect:', 3333);
});
</script>

<style scoped lang="scss">
.startRegister {
  padding-top: 8px;
  .wrap {
    padding-top: 8px;
  }
  .bottom {
    font-size: 14px;
    padding: 16px;
    color: #999999;
  }
}
</style>
